<template>
  <div id="breadcrumb" class="flex align-items-center">
    <svg-icon
      v-if="invisibleSidebar"
      icon-name="sprite_icons_unstaged"
      class-name="s24 pointer"
      @click.native="toggleSidebar"
    />
    <ws-breadcrumb :breadcrumb="breadcrumb" separator-class="el-icon-arrow-right" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import WsBreadcrumb from '@/components/shared/ws/ws-breadcrumb';

export default {
  name: 'users-settings-breadcrumb',
  components: { WsBreadcrumb },
  computed: {
    ...mapState({
      curUser: 'currentUser',
      sidebarCollapsed: 'sidebarCollapsed',
      invisibleSidebar: 'invisibleSidebar',
    }),
    breadcrumb() {
      const user = this.curUser;
      const current = this.$route.path.split('/')[3] || 'password';
      const labelCN = {
        password: '密码',
        oauth2: '账号绑定',
      };
      const breadcrumb = [{ label: user.nickname, path: `/users/${user.id}` }];
      breadcrumb.push({ label: labelCN[current], path: this.$route.path });
      return breadcrumb;
    },
  },
  methods: {
    ...mapActions({
      setSidebarCollapsed: 'setSidebarCollapsed',
    }),
    // 小屏幕下的打开侧边栏
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
  },
};
</script>

<style></style>
